import React, { PureComponent, Fragment } from 'react';
import { Layout, Spin } from 'antd';
const { Content } = Layout;
import { initGlobalState, MicroAppStateActions } from 'qiankun';
import { connect } from 'umi';
import LeftSider from '@/components/Layout/LeftSider';
import MicroApp from '@/components/Microapp/MicroApp';
import MicroAppB from '@/components/Microapp/MicroAppB';
import { checkIsMaster } from '@/utils/layout';

// 子应用布局中需要判断是渲染基座页面还是子应用页面

@connect(({ appMenus: { currentMenuTree } }) => ({ currentMenuTree }))
class MicroAppLayout extends PureComponent {
  state = {
    microAppLoading: true,
    menuTreeNo: '0',
  };

  // Initialize state
  actions: MicroAppStateActions = initGlobalState(this.state);

  // 获取应用菜单
  getCurrentAppMenu(appName, menuTreeNo) {
    let payload = {
      appName: appName,
      menuTreeNo: menuTreeNo,
    };
    // 获取应用菜单
    this.props.dispatch({
      type: 'appMenus/fetchAppMenuTree',
      payload: payload,
    });
  }

  componentDidMount() {
    const { appName } = this.props;

    this.getCurrentAppMenu(appName, this.state.menuTreeNo);

    console.log('f5 refresh BasicLayout componentDidMount');
    var that = this;
    // 监听子应用加载完成状态通知，改变microAppLoading的状态 监听子应用传参触发基座菜单渲染
    this.actions.onGlobalStateChange((state, prev) => {
      // state: new state; prev old state
      console.log(state, prev);
      that.setState(state);
      // 监听子应用菜单树编号变化，获取相应菜单树
      that.getCurrentAppMenu(appName, state.menuTreeNo);
    });
    // 判断基座路由则直接改变状态
    const { pathname } = this.props;
    const isMaster = checkIsMaster(pathname);
    if (isMaster) {
      that.setState({
        microAppLoading: false,
      });
    }
  }

  render() {
    const { pathname, appName, appEntry, currentMenuTree, randomNum } = this.props;
    // 检查是否是基座自己的路由页面
    const isMaster = checkIsMaster(pathname);

    const appContent = (isMaster, children, appName, appEntry) => {
      if (isMaster) {
        return <div>{children}</div>;
      } else {
        if (appEntry) {
          if (appName == 'children-app-2') {
            return <MicroAppB name={appName} entry={appEntry} />;
          } else {
            return <MicroApp name={appName} entry={appEntry} />;
          }
        } else {
          <div>{children}</div>;
        }
      }
    };

    return (
      <Fragment>
        <Layout>
          <LeftSider appName={appName} currentMenuTree={currentMenuTree} randomNum={randomNum} />
          <Layout style={{ padding: '0 24px 24px' }}>
            <Content className="ant-pro-page-container-children-content">
              <div>
                <Spin
                  size="large"
                  tip="Loading..."
                  spinning={this.state.microAppLoading}
                >
                  {appContent(isMaster, this.props.children, appName, appEntry)}
                </Spin>
              </div>
            </Content>
          </Layout>
        </Layout>
      </Fragment>
    );
  }
}

export default MicroAppLayout;
